<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div class="top">
			<div class="topbar wrapper_01">
				<div class="topbar-left">
					<h1 class="logo"><a href="#">网易云音乐</a></h1>
					<ul class="list">
						<li><a href="#" class="item active">发现音乐</a></li>
						<li><a href="#" class="item">我的音乐</a></li>
						<li><a href="#" class="item">关注</a></li>
						<li><a href="#" class="item">商城</a></li>
						<li><a href="#" class="item">音乐人</a></li>
						<li>
							<a href="#" class="item"
								>下载客户端<i
									class="topbar_sprite topbar_icon_hot icon-hot"
								></i
							></a>
						</li>
					</ul>
				</div>
				<div class="topbar-right">
					<div class="search">
						<input type="text" placeholder="音乐/视频/用户/电台" />
					</div>
					<div class="anthor">
						<a href="#">创造者中心</a>
					</div>
					<div class="login">
						<a href="#">登录</a>
					</div>
				</div>
			</div>
		</div>

		<div class="nav">
			<div class="navbar wrapper_01">
				<ul class="list">
					<li>
						<a href="#" class="item active"><span>推荐</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>排行榜</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>歌单</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>主播电台</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>歌手</span></a>
					</li>
					<li>
						<a href="#" class="item"><span>新歌上架</span></a>
					</li>
				</ul>
			</div>
		</div>

		<div class="banner">
			<div class="area warpper_03">
				<div class="area-left">
					<ul class="img-list">
						<li>
							<a href="#" class="item"
								><img src="./img/banner_02.jpeg" alt=""
							/></a>
						</li>
						<li>
							<a href="#" class="item"
								><img src="./img/banner_02.jpeg" alt=""
							/></a>
						</li>
						<li>
							<a href="#" class="item"
								><img src="./img/banner_02.jpeg" alt=""
							/></a>
						</li>
					</ul>
					<ul class="dots-list">
						<li><a href="#" class="item active"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
						<li><a href="#" class="item"></a></li>
					</ul>
				</div>
				<div class="area-right">
					<a href="#" class="download">下载客户端</a>
					<p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				</div>
				<a href="#" class="control control-left"></a>
				<a href="#" class="control control-right"></a>
			</div>
		</div>
	</body>
</html>
